<template>
    <div style="height:100%">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
        <ItemSyncDetail
            :show="detailShow"
            :riskEntryTypeObj="riskEntryTypeObj"
            :info="{ ...info, successNum: data[0].value, errorNum: data[1].value }"
            @item-sync-detail="itemSyncDetailHandle"
            v-if="detailShow"
        ></ItemSyncDetail>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import ItemSyncDetail from './item-sync-detail.vue';

@Component({
    name: 'ItemPieHollow',
    components: {
        ItemSyncDetail,
    },
})
export default class ItemPieHollow extends Vue {
    @Prop()
    data: any[];

    @Prop() title: string;
    @Prop() info: any;
    @Prop() riskEntryTypeObj: any;

    chartInstance: any = null;
    detailShow: boolean = false;
    fontSizeValue: number = 12;

    @Watch('data', { deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    async mounted() {
        this.initChart();
        this.updateChart(this.data);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        let that = this;
        let initOption = {
            title: {
                show: true,
                text: `{a|}{b|${this.title}}`,
                // text: `<span style="width:6px;height:6px;background-color:red"></span>`,
                textStyle: {
                    color: 'black',
                    fontWeight: 'bold',
                    rich: {
                        a: {
                            width: 12,
                            height: 12,
                            lineHeight: 12,
                            borderRadius: 50,
                            borderWidth: 4,
                            borderColor: '#2288ff',
                            borderType: 'solid',
                            verticalAlign: 'top', // 对齐方式
                        },
                        b: {
                            fontWeight: 'bold',
                            fontSize: 15,
                            padding: [0, 0, 0, 5],
                        },
                    },
                },
            },
            toolbox: {
                show: true,
                itemSize: 17,
                showTitle: false,
                top: -5,
                feature: {
                    myTool1: {
                        show: true,
                        title: '刷新',
                        icon:
                            'path://M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z',
                        //   设置颜色时放开
                        iconStyle: {
                            borderColor: '#7b7b7b',
                        },
                        emphasis: {
                            iconStyle: {
                                borderColor: '#91cc75',
                            },
                        },
                        onclick: function() {
                            that.refresh();
                        },
                    },

                    // myTool2: {
                    //     show: true,
                    //     title: '饼状图',
                    //     icon: 'path://M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
                    //     iconStyle: {
                    //         borderColor: '#91cc75',
                    //     },
                    //     emphasis: {
                    //         iconStyle: {
                    //             borderColor: '#91cc75',
                    //         },
                    //     },
                    //     onclick: function() {},
                    // },

                    myTool3: {
                        show: true,
                        title: '数据视图',
                        icon: 'path://M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
                        emphasis: {
                            iconStyle: {
                                borderColor: '#91cc75',
                            },
                        },
                        onclick: function() {
                            that.detailShow = true;
                        },
                    },
                },
                tooltip: {
                    show: true,
                    formatter: param => {
                        return param.title;
                    },
                    backgroundColor: '#f5f5f5',
                },
            },
            tooltip: {
                show: true,
                trigger: 'item',
                confine: true,
                formatter: param => {
                    const unit = this.info.name == '条目状态' ? '个' : '次';
                    return param.marker + param.name + '<br/>' + '&nbsp&nbsp&nbsp' + param.value + unit + '&nbsp' + param.percent + '%';
                },

                // padding: 5,
                backgroundColor: '#f5f5f5',
                borderColor: '#ffffff',
                textStyle: {
                    color: '#6f6d6d',
                },
            },
            legend: {
                orient: 'vertical',
                icon: 'circle',
                right: '2%',
                bottom: '1%',
                itemGap: 6,
                itemHeight: 8, // 修改icon图形大小
                itemWidth: 10,
                selectedMode: false,
                textStyle: {
                    fontSize: this.fontSizeValue,
                },
            },
            color: this.title == '条目状态' ? ['#f48d9e', '#76bdfe'] : ['#87e4fe', '#a6afff'],
            series: [
                {
                    type: 'pie',
                    radius: ['35%', '56%'],
                    center: ['50%', '53%'],
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    avoidLabelOverlap: true,
                    label: {
                        show: true,
                        // position: 'inner',
                        // rotate: true,
                        // formatter: '{b}\n\n{d}%',
                        formatter: '{d}%',
                        fontSize: this.fontSizeValue,
                        color: 'black',
                        fontWeight: 'normal',
                    },
                    // emphasis: {
                    //     // scale: true,
                    //     // scaleSize: 1.2,
                    //     label: {
                    //         show: true,
                    //         // fontSize: '16',
                    //         // fontWeight: 'bold'
                    //     },
                    // },
                    labelLine: {
                        show: true,
                        length: 10,
                        length2: 6,
                        smooth: 0.2,
                    },
                    data: this.data,
                },
            ],
            graphic: [
                {
                    type: 'text',
                    top: '48%',
                    left: 'center',
                    style: {
                        text: this.title == '条目状态' ? '条目总数' : '同步总次数',
                        fill: '#a4a4a4',
                        fontSize: 13,
                    },
                },
                {
                    type: 'text',
                    top: '57%',
                    left: 'center',
                    style: {
                        text: this.info.total || 0,
                        fill: '#525252',
                        fontSize: 14,
                    },
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // 点击事件
        // const that = this;
        // this.chartInstance.on('click', function(params) {
        //     // console.log(params);
        //     if (params.name == '平均值') {
        //         return;
        //     } else {
        //         that.$emit('signKey', params.name, params.data.ids);
        //     }
        // });
    }

    updateChart(e) {
        // console.log(e, 'e');
        // 平均值
        const dataOption = {
            series: [{ data: this.data }],
            graphic: [{}, { style: { text: this.info.total || 0 } }],
        };
        this.chartInstance.setOption(dataOption);
    }

    refresh() {
        this.$emit('refresh', this.title);
    }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }
}
</script>

<style scoped>
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
